{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.min.css' %}">
    <style>
        .login-box {
            width: 450px;
            margin: 100px auto;
            box-shadow: 0px 1px 10px rgba(26, 26, 26, 0.1);
            padding: 10px 50px 30px;
        }

        .error-msg {
            color: red;
            position: absolute;
            font-size: small;
        }

        /* 重写.form-group */
        .form-group{
            margin-bottom: 20px;
        }

    </style>
</head>
<body>
<div class="login-box">
    <h2 style="text-align: center">用户登录</h2>
    <form novalidate id="smsForm" method="post">
        {% csrf_token %}

        {% for field in form %}
            {% if field.name == "code" %}
                <!-- 对于code字段后边加"发送短信"按钮 -->
                <div class="form-group" style="position: relative">
                    <label>{{ field.label }}</label>
                    <div class="row">
                        <div class="col-xs-7">
                            {{ field }}
                            <span class="error-msg">{{ field.errors.0 }}</span>
                        </div>
                        <div class="col-xs-5">
                            <input class="btn btn-default" type="button" id="btnSendSms" value="点击获取验证码"/>
                        </div>
                    </div>
                </div>
            {% else %}
                <div class="form-group" style="position: relative">
                    <label>{{ field.label }}</label>
                    {{ field }}
                    <span class="error-msg">{{ field.errors.0 }}</span>
                </div>
            {% endif %}
        {% endfor %}

        <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center">
            <button type="submit" class="btn btn-primary">提交</button>

            {% if request.path == "/login/" %}
                <a href="{% url "sms_login" %}">短信验证登录</a>
            {% elif request.path == "/sms/login/" %}
                <a href="{% url "login" %}">用户名密码登录</a>
            {% endif %}
        </div>

    </form>
</div>
<script src="{% static "js/jquery-3.6.0.min.js" %}"></script>
<script>
    $(function () {
        // 当页面加载完成之后，自动执行
        bindSendSmsEvent()
    })

    function bindSendSmsEvent() {
        $("#btnSendSms").click(function () {
            $(".error-msg").empty()

            // 发送请求
            $.ajax({
                // url: "/send/sms/",
                url: "{% url "send_sms" %}",
                type: "POST",
                data: {
                    "mobile": $("#id_mobile").val(),
                    "role": $("#id_role").val()
                },
                dataType: "JSON",  // dataType默认为字符串，"JSON"表示json格式返回数据
                success: function (res) {
                    if (!res.status) {
                        // 发送失败
                        $.each(res.msg, function (k, v) {
                            $("#id_mobile").next().text(v[0]);
                        })
                    } else {
                        // 发送成功
                        /*
                        var span = document.createElement('span')
                        span.textContent = '发送成功'
                        var idCodeElement = document.getElementById("id_code")
                        idCodeElement.parentElement.appendChild(span)
                         */

                        // 倒计时
                        var btnSendSms = $("#btnSendSms")
                        var second = 60
                        btnSendSms.prop("disabled", true)
                        // 定义定时器
                        var clock = setInterval(function () {
                            second -= 1
                            // 60s后清除定时器
                            if (second < 0) {
                                clearInterval(clock)
                                btnSendSms.prop("disabled", false)
                                btnSendSms.val("重新发送")
                            } else {
                                btnSendSms.val(second + "秒后重新发送")  // $("#btnSendSms").text(second + "秒后重新发送")  // 不是text，是val
                            }
                        }, 1000)
                    }

                }
            })
        })
    }

</script>
</body>
</html>